<?php
/**
 * Created by PhpStorm.
 * User: sunshubo
 * Date: 2017/9/16
 * Time: 9:32
 */
?>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf8"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
    <title>文思学堂 - 学生画像</title>
    <link rel="stylesheet" type="text/css" href="/static/css/base.css?t=1505204250563"/>
    <link rel="stylesheet" type="text/css" href="/static/css/statistics.css?t=1505204250563"/>
    <link rel="stylesheet" type="text/css" href="/static/css/preview.css?t=1505204250563"/>
    <link rel="stylesheet" type="text/css" href="/static/css/iconfont.css?t=1505204250563"/>
    <!--    <script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>-->
    <!--    <meta http-equiv="Content-Security-Policy"-->
    <!--          content="script-src 'self' 'nonce-b1dfbc78515f9c72' 'unsafe-inline' 'unsafe-eval' https: *.qq.com api.map.baidu.com wx-static.drip.im eco-api.meiqia.com wxs-b.drip.im hm.baidu.com;object-src *.qq.com *.youku.com;frame-src *.qq.com *.youku.com weixinping: weixin:">-->
    <script src="/static/js/echarts.min.js"></script>
    <!--    <script src="/static/js/echarts-all.js"></script>-->
    <script src="/static/js/jquery.js"></script>
    <script src="//cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <script src="/static/js/qrcode.js"></script>
</head>
<body>
<div class="screen">
    <div class='ui-form statistics'>
        <div class="form-title"> 文思学堂 - 学生画像</div>
        <div class="form-data" data-form-id="ea7d7ff2-5f4f-4fa1-b904-a42916874ce5">
            <div class="field" data-field-type="select" data-field-id="120"
                 data-field-options=''>
                <div class="hd">
                    <label>学习倾向</label>
                    <span class="fn-right">
                    <a class="bar selected"><em></em></a>
                    <a class="pie"><em></em></a>
                  </span>
                </div>
                <div id="radar" class="bd" style="width: 360px;height:300px;left: -15px;">
                </div>
            </div>
            <div class="field" data-field-type="select" data-field-id="121"
                 data-field-options='[{&quot;label&quot;:&quot;一年级&quot;,&quot;value&quot;:1},{&quot;label&quot;:&quot;二年级&quot;,&quot;value&quot;:2},{&quot;label&quot;:&quot;三年级&quot;,&quot;value&quot;:3},{&quot;label&quot;:&quot;四年级&quot;,&quot;value&quot;:4},{&quot;label&quot;:&quot;五年级&quot;,&quot;value&quot;:8},{&quot;label&quot;:&quot;六年级&quot;,&quot;value&quot;:7},{&quot;label&quot;:&quot;初一&quot;,&quot;value&quot;:6},{&quot;label&quot;:&quot;初二&quot;,&quot;value&quot;:5},{&quot;label&quot;:&quot;初三&quot;,&quot;value&quot;:9}]'>
                <div class="hd">
                    <label>各科学习成绩分布</label>
                    <span class="fn-right">
                    <a class="bar selected"><em></em></a>
                    <a class="pie"><em></em></a>
                  </span>
                </div>
                <div id="line" class="bd" style="width: 360px;height:300px;left: -15px;">
                </div>
            </div>
            <div class="field" data-field-type="select" data-field-id="122"
                 data-field-options='[{&quot;label&quot;:&quot;1班&quot;,&quot;value&quot;:1},{&quot;label&quot;:&quot;2班&quot;,&quot;value&quot;:2},{&quot;label&quot;:&quot;3班&quot;,&quot;value&quot;:10},{&quot;label&quot;:&quot;4班&quot;,&quot;value&quot;:9},{&quot;label&quot;:&quot;5班&quot;,&quot;value&quot;:8},{&quot;label&quot;:&quot;6班&quot;,&quot;value&quot;:7},{&quot;label&quot;:&quot;7班&quot;,&quot;value&quot;:6},{&quot;label&quot;:&quot;8班&quot;,&quot;value&quot;:5},{&quot;label&quot;:&quot;9班&quot;,&quot;value&quot;:4},{&quot;label&quot;:&quot;10班&quot;,&quot;value&quot;:3},{&quot;label&quot;:&quot;11班&quot;,&quot;value&quot;:15},{&quot;label&quot;:&quot;12班&quot;,&quot;value&quot;:14},{&quot;label&quot;:&quot;13班&quot;,&quot;value&quot;:13},{&quot;label&quot;:&quot;14班&quot;,&quot;value&quot;:12},{&quot;label&quot;:&quot;15班&quot;,&quot;value&quot;:11}]'>
                <div class="hd">
                    <label>作业自主完成率</label>
                    <span class="fn-right">
                    <a class="bar selected"><em></em></a>
                    <a class="pie"><em></em></a>
                  </span>
                </div>
                <div id="bar" class="bd" style="width: 360px;height:300px;left: -15px;">
                </div>
            </div>
            <div class="field" data-field-type="select" data-field-id="123"
                 data-field-options='[]'>
                <div class="hd">
                    <label>作业错题率</label>
                    <span class="fn-right">
                    <a class="bar selected"><em></em></a>
                    <a class="pie"><em></em></a>
                  </span>
                </div>
                <div id="sbar" class="bd" style="width: 350px;height:300px;">
                </div>
            </div>
            <div class="field" data-field-type="select" data-field-id="124"
                 data-field-options='[{&quot;label&quot;:&quot;男孩&quot;,&quot;value&quot;:1},{&quot;label&quot;:&quot;女孩&quot;,&quot;value&quot;:2}]'>
                <div class="hd">
                    <label>错题类型</label>
                    <span class="fn-right">
                    <a class="bar selected"><em></em></a>
                    <a class="pie"><em></em></a>
                  </span>
                </div>
                <div id="epie" class="bd" style="width: 360px;height:300px;left: -15px;">
                </div>
            </div>
            <div class="field" data-field-type="select" data-field-id="125"
                 data-field-options=''>
                <div class="hd">
                    <label>期中考试成绩分布</label>
                    <span class="fn-right">
                    <a class="bar selected"><em></em></a>
                    <a class="pie"><em></em></a>
                  </span>
                </div>
                <div id="pis" class="bd" style="width: 360px;height:300px;left: -15px;">
                </div>
            </div>
            <div class="field" data-field-type="select" data-field-id="126"
                 data-field-options=''>
                <div class="hd">
                    <label>孩子综合评分</label>
                    <span class="fn-right">
                    <a class="bar selected"><em></em></a>
                    <a class="pie"><em></em></a>
                  </span>
                </div>
                <div id="zpie" class="bd" style="width: 360px;height:300px;left: -15px;">
                </div>
            </div>
        </div>
        <div class="loading">
            <div class="wrap">
                <div class="circle"></div>
                <p>加载中</p></div>
        </div>
        <footer class="drip-footer">
            <p> © <a href="#">文思学堂</a> 最终解析权 </p>
        </footer>
    </div>
</div>
<div class="qrcode">
    <div id="qr_container" class="img-side">
        <div style="height: 8px;"></div>
        <div id="codeico" class="codeico"></div>
    </div>
    <p>微信扫一扫</p>
    <p>手机上查看报表</p>
</div>
</body>
<script nonce="b1dfbc78515f9c72">
    //    seajs.use("https://wx-static.drip.im/js/wap.js?t=1505204250563",function(app){
    //        app.init('shop/form/statistics');
    //    });

    $(".loading").remove();

    var radar = echarts.init(document.getElementById('radar'));
    radar.showLoading();
    console.log(radar);
    // 指定图表的配置项和数据
    option = {
        tooltip: {
            show: true,
            trigger: 'item'
        },
        radar: {
            shape: 'circle',
            name: {
                textStyle: {
                    color: '#fff',
                    backgroundColor: '#999',
                    borderRadius: 3,
                    padding: [3, 5]
                }
            },
            indicator: [
                {name: '数学', max: 100},
                {name: '语文', max: 100},
                {name: '英语', max: 100},
                {name: '品德', max: 100},
                {name: '美术', max: 100},
                {name: '音乐', max: 100}
            ]
        },
        series: [{
//            symbol: "none",
            name: '学习倾向',
            type: 'radar',
//            areaStyle: {normal: {}},
            data: [
                {
                    value: [95, 90, 78, 90, 90, 80],
                    name: '上学期',
                    color: '#00AFBB'
                },
                {
                    value: [98, 99, 100, 70, 70, 70],
                    name: '本学期',
                    color: '#EA5514'
                }
            ]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    radar.hideLoading();
    radar.setOption(option);

    var line = echarts.init(document.getElementById('line'));
    option = {
//        title: {
//            text: '折线图堆叠'
//        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['数学', '语文', '英语']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
//        toolbox: {
//            feature: {
//                saveAsImage: {}
//            }
//        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '数学',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210],
                color: ['#00AFBB']
            },
            {
                name: '语文',
                type: 'line',
                stack: '总量',
                data: [220, 182, 191, 234, 290, 330, 310],
                color: ['#EA5514']
            },
            {
                name: '英语',
                type: 'line',
                stack: '总量',
                data: [150, 232, 201, 154, 190, 330, 410],
                color: ['#F8B62D']
            }
        ]
    };
    line.setOption(option);

    var bar = echarts.init(document.getElementById('bar'));
    //    bar.title = '堆叠柱状图';
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['数学', '语文', '英语']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '数学',
                type: 'bar',
                data: [320, 332, 301, 334, 390, 330, 320],
                color: ['#00AFBB']
            },
            {
                name: '语文',
                type: 'bar',
                stack: '广告',
                data: [120, 132, 101, 134, 90, 230, 210],
                color: ['#EA5514']
            },
            {
                name: '英语',
                type: 'bar',
                data: [862, 1018, 964, 1026, 1679, 1600, 1570],
                color: ['#F8B62D'],
                markLine: {
                    lineStyle: {
                        normal: {
                            type: 'dashed'
                        }
                    },
                    data: [
                        [{type: 'min'}, {type: 'max'}]
                    ]
                }
            }
        ]
    };
    bar.setOption(option);

    var pie = echarts.init(document.getElementById('pis'));
    option = {
        title: {
//            text: '某站点用户访问来源',
            subtext: '学校来源数据',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
//            orient: 'vertical',
//            left: 'left',
//            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        series: [
            {
                name: '考试成绩',
                type: 'pie',
                radius: '70%',
                center: ['50%', '60%'],
                data: [
                    {value: 89, name: '数学'},
                    {value: 95, name: '语文'},
                    {value: 73, name: '英语'},
                    {value: 67, name: '音乐'},
                    {value: 80, name: '美术'},
                    {value: 65, name: '品德'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 10,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    pie.setOption(option);

    //    sbar.title = '坐标轴刻度与标签对齐';
    var sbar = echarts.init(document.getElementById('sbar'));
    option = {
        color: ['#00AFBB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '错题率',
                type: 'bar',
                barWidth: '60%',
                data: [10, 52, 37, 40, 20, 60, 10],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 1,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    sbar.setOption(option);

    //错题类型
    var epie = echarts.init(document.getElementById('epie'));
    option = {
        title: {
//            text: '某站点用户访问来源',
            subtext: '每日作业收集',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
//            orient: 'vertical',
//            left: 'left',
//            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        series: [
            {
                name: '错题分布',
                type: 'pie',
                radius: '60%',
                center: ['50%', '60%'],
                data: [
                    {value: 0, name: '运算'},
                    {value: 5, name: '应用'},
                    {value: 10, name: '换算'},
                    {value: 67, name: '计算面积'},
                    {value: 80, name: '质数、公倍数、公约数'},
                    {value: 35, name: '图形性质'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 10,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    epie.setOption(option);

    //综合评分
    var zpie = echarts.init(document.getElementById('zpie'));
    option = {
        title: {
            text: '综合评分',
            subtext: '75%',
            x: 'center',
            y: 'center',
            textStyle: {
                align: 'center',
                color: '#00AFBB',
//                fontStyle: 'oblique',
                fontSize: '30',
                fontWeight: 'bold',
                textShadowColor: "#eee",
                textShadowBlur: '3',
                textShadowOffsetX: '3',
                textShadowOffsetY: '3'
            },
            subtextStyle: {
                align: 'center',
                fontSize: '24',
                color: '#EA5514'
            }
        },
        tooltip: {
//            trigger: 'item',
//            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
//            orient: 'vertical',
            x: 'center',
            data: ['数学', '语文', '英语']
        },
        series: [
            {
                name: '综合评分',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: true
                    }
                },
                data: [
                    {value: 335, name: '数学'},
                    {value: 310, name: '语文'},
                    {value: 234, name: '英语'}
                ]
            }
        ]
    };
    zpie.setOption(option);

</script>
</html>